<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
import * as echarts from 'echarts';

const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '病例',
  initForm: {},
  doCreate: api.createOrder,
  doDelete: api.deleteOrder,
  doUpdate: api.updateOrder,
  refresh: () => on_ref(),
})

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  projects: [],
  card_loading: false,
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  tab_goods: [],
  meeting_users: [],
  config: [],
  uploadAction: base_path + '/system/base/userimg',
  token: getToken(),
  pay: false,
  pay_data: [],
  payForm: {
    id: 0,
    order_id: 0,
    pay_type: 3,
    images: [],
    images_pc: []
  },
  get_jf_data: [],
  fjq: [],
  keyword: "",
  up_photo: false,
  PhotoForm: {
    id: 0,
    before_images: [],
    after_images: []
  },
  show_form: false,
  giveForm: {},
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})


function on_ref() {
  get_order_list()
  get_map()
}

function get_order_list() {
  data.card_loading = true
  api.getTest({
    user_id: data.select_customer.user_id,
    keyword: data.keyword
  }).then((res) => {
    data.projects = res.data.items
    data.card_loading = false
    data.loading = false
  })
}


function search_project() {
  data.loading = true;
  const keywords = data.keyword.toLowerCase().trim().split(/\s+/); // 支持空格分隔多关键词

  data.projects = data.projects.map(item => {

    const projectName = item.projects.toLowerCase();
    // 如果无搜索词或匹配任意关键词
    const shouldShow = keywords.length === 0 || keywords.some(kw => projectName.includes(kw));
    return {
      ...item,
      show: shouldShow ? 1 : 0
    };
  });
  data.loading = false;
}

const handleFinish = ({file, event}) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }
  return file
}

function add_test() {
  api.getConfig().then((res) => {
    data.config = res.data
  })
  data.show_form = true
  data.giveForm.user_id = data.select_customer.user_id
  data.giveForm.doctor = 1
  data.giveForm.images = []
  data.giveForm.remark = ''
  data.giveForm.category_id = []
}

function create_give() {

  if (data.giveForm.category_id.length > 0) {
    if (Array.isArray(data.giveForm.category_id)) {
      data.giveForm.category_id = data.giveForm.category_id.join(',');
    } else {
      data.giveForm.category_id = "";
    }
  } else {
    message.error('请选择护士项目')
    return
  }

  if (data.giveForm.images.length > 0) {
    data.giveForm.images_pc = data.giveForm.images.map(item => item.url);
  } else {
    message.error('请上传护士单')
    return
  }

  api.createTest(data.giveForm).then((res) => {
    message.success('报告上传成功')
    data.show_form = false
    on_ref()
  })
}

const data1 = ref(null);
const data2 = ref(null);
const data3 = ref(null);
const data4 = ref(null);

const activeTab = ref('map1') // 默认激活的标签页

const handleTabChange = (tabName) => {
  activeTab.value = tabName
  nextTick(() => {
    switch(tabName) {
      case 'map1':
        get_data1()
        break
      case 'map2':
        get_data2()
        break
      case 'map3':
        get_data3()
        break
    }
  })
}

function get_map(){
  get_data1()
  get_data4()
}

const get_data1 = () => {
  const map1 = echarts.init(data1.value);
  const option = {
    grid: {
      containLabel: false,
      top:10,
      right: 0,
      bottom: 0,
      left: 0
    },
    color: ["#755791"],
    xAxis: {
      type: 'category',
      data: ['05-01', '05-05', '05-10', '05-15', '05-20', '05-25', '05-30'],
    },
    yAxis: {
      axisLabel: {  // Y 轴标签样式
        show: false  // 关键设置：不显示标签
      },
      type: 'value',
      splitLine: {
        show: true, // 显示网格线（竖线）
        lineStyle: {
          color: '#eee', // 网格线颜色
          type: 'dashed' // 可选：虚线样式
        }
      },
      min: 4,  // 设置Y轴最小值（根据你的数据范围调整）
      max: 5.5  // 设置Y轴最大值
    },
    series: [{
      data: [5, 4.2, 4.6, 4.8, 5.1, 4.9, 5.1],
      type: 'line',
      label: {  // 新增label配置
        show: true,  // 显示标签
        position: 'top',  // 标签位置（top/bottom/left/right/inside等）
        color: '#755791',  // 标签颜色
        formatter: '{c}'  // 显示数据值（{c}代表当前数据值）
      },
      symbol: 'circle',  // 显示数据点圆点
      symbolSize: 10,  // 圆点大小
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'  // 圆点边框颜色
      }
    }]
  };
  map1.setOption(option);
}
const get_data2 = () => {
  const map2 = echarts.init(data2.value);
  const option = {
    grid: {
      containLabel: false,
      right: 0,
      bottom: 0,
      left: 0,
      top:25,
    },
    color: ["#755791"],
    xAxis: {
      type: 'category',
      data: ['05-01', '05-05', '05-10', '05-15', '05-20', '05-25', '05-30'],
    },
    yAxis: {
      axisLabel: {  // Y 轴标签样式
        show: false  // 关键设置：不显示标签
      },
      type: 'value',
      splitLine: {
        show: true, // 显示网格线（竖线）
        lineStyle: {
          color: '#eee', // 网格线颜色
          type: 'dashed' // 可选：虚线样式
        }
      },
      min: 10,  // 设置Y轴最小值（根据你的数据范围调整）
      max: 15  // 设置Y轴最大值
    },
    series: [{
      data: [10, 12, 13, 14, 13, 12, 14],
      type: 'line',
      label: {  // 新增label配置
        show: true,  // 显示标签
        position: 'top',  // 标签位置（top/bottom/left/right/inside等）
        color: '#755791',  // 标签颜色
        formatter: '{c}'  // 显示数据值（{c}代表当前数据值）
      },
      symbol: 'circle',  // 显示数据点圆点
      symbolSize: 10,  // 圆点大小
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'  // 圆点边框颜色
      }
    }]
  };
  map2.setOption(option);
}
const get_data3 = () => {
  const map3 = echarts.init(data3.value);
  const option = {
    grid: {
      containLabel: false,
      right: 0,
      bottom: 0,
      left: 0,
      top:25,
    },
    color: ["#755791"],
    xAxis: {
      type: 'category',
      data: ['05-01', '05-05', '05-10', '05-15', '05-20', '05-25', '05-30'],
    },
    yAxis: {
      axisLabel: {  // Y 轴标签样式
        show: false  // 关键设置：不显示标签
      },
      type: 'value',
      splitLine: {
        show: true, // 显示网格线（竖线）
        lineStyle: {
          color: '#eee', // 网格线颜色
          type: 'dashed' // 可选：虚线样式
        }
      },
      min: 20,  // 设置Y轴最小值（根据你的数据范围调整）
      max: 40  // 设置Y轴最大值
    },
    series: [{
      data: [25, 32, 36, 40, 38, 28, 32],
      type: 'line',
      label: {  // 新增label配置
        show: true,  // 显示标签
        position: 'top',  // 标签位置（top/bottom/left/right/inside等）
        color: '#755791',  // 标签颜色
        formatter: '{c}'  // 显示数据值（{c}代表当前数据值）
      },
      symbol: 'circle',  // 显示数据点圆点
      symbolSize: 10,  // 圆点大小
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'  // 圆点边框颜色
      }
    }]
  };
  map3.setOption(option);
}
const get_data4 = () => {
  const map4 = echarts.init(data4.value);
  const dataBJ = [
    [55, 9, 56, 0.46, 18, 6, 1],
    [25, 11, 21, 0.65, 34, 9, 2],
    [56, 7, 63, 0.3, 14, 5, 3],
    [33, 7, 29, 0.33, 16, 6, 4],
    [42, 24, 44, 0.76, 40, 16, 5],
    [82, 58, 90, 1.77, 68, 33, 6],
    [74, 49, 77, 1.46, 48, 27, 7],
    [78, 55, 80, 1.29, 59, 29, 8],
    [267, 216, 280, 4.8, 108, 64, 9],
    [185, 127, 216, 2.52, 61, 27, 10],
    [39, 19, 38, 0.57, 31, 15, 11],
    [41, 11, 40, 0.43, 21, 7, 12],
    [64, 38, 74, 1.04, 46, 22, 13],
    [108, 79, 120, 1.7, 75, 41, 14],
    [108, 63, 116, 1.48, 44, 26, 15],
    [33, 6, 29, 0.34, 13, 5, 16],
    [94, 66, 110, 1.54, 62, 31, 17],
    [186, 142, 192, 3.88, 93, 79, 18],
    [57, 31, 54, 0.96, 32, 14, 19],
    [22, 8, 17, 0.48, 23, 10, 20],
    [39, 15, 36, 0.61, 29, 13, 21],
    [94, 69, 114, 2.08, 73, 39, 22],
    [99, 73, 110, 2.43, 76, 48, 23],
    [31, 12, 30, 0.5, 32, 16, 24],
    [42, 27, 43, 1, 53, 22, 25],
    [154, 117, 157, 3.05, 92, 58, 26],
    [234, 185, 230, 4.09, 123, 69, 27],
    [160, 120, 186, 2.77, 91, 50, 28],
    [134, 96, 165, 2.76, 83, 41, 29],
    [52, 24, 60, 1.03, 50, 21, 30],
    [46, 5, 49, 0.28, 10, 6, 31]
  ];
  const dataGZ = [
    [26, 37, 27, 1.163, 27, 13, 1],
    [85, 62, 71, 1.195, 60, 8, 2],
    [78, 38, 74, 1.363, 37, 7, 3],
    [21, 21, 36, 0.634, 40, 9, 4],
    [41, 42, 46, 0.915, 81, 13, 5],
    [56, 52, 69, 1.067, 92, 16, 6],
    [64, 30, 28, 0.924, 51, 2, 7],
    [55, 48, 74, 1.236, 75, 26, 8],
    [76, 85, 113, 1.237, 114, 27, 9],
    [91, 81, 104, 1.041, 56, 40, 10],
    [84, 39, 60, 0.964, 25, 11, 11],
    [64, 51, 101, 0.862, 58, 23, 12],
    [70, 69, 120, 1.198, 65, 36, 13],
    [77, 105, 178, 2.549, 64, 16, 14],
    [109, 68, 87, 0.996, 74, 29, 15],
    [73, 68, 97, 0.905, 51, 34, 16],
    [54, 27, 47, 0.592, 53, 12, 17],
    [51, 61, 97, 0.811, 65, 19, 18],
    [91, 71, 121, 1.374, 43, 18, 19],
    [73, 102, 182, 2.787, 44, 19, 20],
    [73, 50, 76, 0.717, 31, 20, 21],
    [84, 94, 140, 2.238, 68, 18, 22],
    [93, 77, 104, 1.165, 53, 7, 23],
    [99, 130, 227, 3.97, 55, 15, 24],
    [146, 84, 139, 1.094, 40, 17, 25],
    [113, 108, 137, 1.481, 48, 15, 26],
    [81, 48, 62, 1.619, 26, 3, 27],
    [56, 48, 68, 1.336, 37, 9, 28],
    [82, 92, 174, 3.29, 0, 13, 29],
    [106, 116, 188, 3.628, 101, 16, 30],
    [118, 50, 0, 1.383, 76, 11, 31]
  ];
  const dataSH = [
    [91, 45, 125, 0.82, 34, 23, 1],
    [65, 27, 78, 0.86, 45, 29, 2],
    [83, 60, 84, 1.09, 73, 27, 3],
    [109, 81, 121, 1.28, 68, 51, 4],
    [106, 77, 114, 1.07, 55, 51, 5],
    [109, 81, 121, 1.28, 68, 51, 6],
    [106, 77, 114, 1.07, 55, 51, 7],
    [89, 65, 78, 0.86, 51, 26, 8],
    [53, 33, 47, 0.64, 50, 17, 9],
    [80, 55, 80, 1.01, 75, 24, 10],
    [117, 81, 124, 1.03, 45, 24, 11],
    [99, 71, 142, 1.1, 62, 42, 12],
    [95, 69, 130, 1.28, 74, 50, 13],
    [116, 87, 131, 1.47, 84, 40, 14],
    [108, 80, 121, 1.3, 85, 37, 15],
    [134, 83, 167, 1.16, 57, 43, 16],
    [79, 43, 107, 1.05, 59, 37, 17],
    [71, 46, 89, 0.86, 64, 25, 18],
    [97, 71, 113, 1.17, 88, 31, 19],
    [84, 57, 91, 0.85, 55, 31, 20],
    [87, 63, 101, 0.9, 56, 41, 21],
    [104, 77, 119, 1.09, 73, 48, 22],
    [87, 62, 100, 1, 72, 28, 23],
    [168, 128, 172, 1.49, 97, 56, 24],
    [65, 45, 51, 0.74, 39, 17, 25],
    [39, 24, 38, 0.61, 47, 17, 26],
    [39, 24, 39, 0.59, 50, 19, 27],
    [93, 68, 96, 1.05, 79, 29, 28],
    [188, 143, 197, 1.66, 99, 51, 29],
    [174, 131, 174, 1.55, 108, 50, 30],
    [187, 143, 201, 1.39, 89, 53, 31]
  ];
  const lineStyle = {
    width: 1,
    opacity: 0.5
  };
  const option = {
      grid: {
          containLabel: false,
          right: 0,
          bottom: 0,
          left: 0,
          top:25,
        },
      legend: {
        left: 0,
        data: ['3月', '4月', '5月'],
        itemGap: 20,
        textStyle: {
          color: '#000',
          fontSize: 14
        },
        selectedMode: 'single'
      },
      radar: {
        indicator: [
          { name: '下肢力量', max: 300 },
          { name: '上肢力量', max: 250 },
          { name: '心肺功能', max: 300 },
          { name: '平衡能力', max: 5 },
          { name: '核心方星', max: 200 },
          { name: '上下坡灵活度', max: 100 }
        ],
        shape: 'circle',
        splitNumber: 5,
        axisName: {
          color: '#755791'
        },
        splitLine: {
          lineStyle: {
            color: [
              'rgba(196, 112, 115, 0.1)',
              'rgba(196, 112, 115, 0.2)',
              'rgba(196, 112, 115, 0.4)',
              'rgba(196, 112, 115, 0.6)',
              'rgba(196, 112, 115, 0.8)',
              'rgba(196, 112, 115, 1)'
            ].reverse()
          }
        },
        splitArea: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(196, 112, 115, 0.5)'
          }
        }
      },
      series: [
        {
          name: '3月',
          type: 'radar',
          lineStyle: lineStyle,
          data: dataBJ,
          symbol: 'none',
          itemStyle: {
            color: '#755791'
          },
          areaStyle: {
            opacity: 0.1
          }
        },
        {
          name: '4月',
          type: 'radar',
          lineStyle: lineStyle,
          data: dataSH,
          symbol: 'none',
          itemStyle: {
            color: '#755791'
          },
          areaStyle: {
            opacity: 0.05
          }
        },
        {
          name: '5月',
          type: 'radar',
          lineStyle: lineStyle,
          data: dataGZ,
          symbol: 'none',
          itemStyle: {
            color: '#755791'
          },
          areaStyle: {
            opacity: 0.05
          }
        }
      ]
    };
  map4.setOption(option);
}

</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">

    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
      <div style="display: flex;width: 100%;">
        <div style="width: 50%">
          <n-scrollbar style="max-height: calc(100vh - 140px);padding:0 20px 0px 0px">
            <n-card embedded size="small" content-style="padding: 20px;" :bordered="false"
                  :segmented="{content: true,footer: 'soft',}">
              <template #header>
              <n-h6 prefix="bar" style="margin: 0;font-size: 18px">基础体能</n-h6>
            </template>
             <n-tabs type="line" animated v-model:value="activeTab" @update:value="handleTabChange">
                <n-tab-pane name="map1" tab="血糖指标对比">
                  <div ref="data1" style="height: 150px; width: 100%;"></div>
                </n-tab-pane>
                <n-tab-pane name="map2" tab="血氧指标对比">
                  <div ref="data2" style="height: 150px; width: 100%;"></div>
                </n-tab-pane>
                <n-tab-pane name="map3" tab="心率指标对比">
                  <div ref="data3" style="height: 150px; width: 100%;"></div>
                </n-tab-pane>
              </n-tabs>
            </n-card>

            <n-card embedded size="small" content-style="padding: 20px;" :bordered="false"
                  :segmented="{content: true,footer: 'soft',}" style="margin-top: 20px;">
              <template #header>
              <n-h6 prefix="bar" style="margin: 0;font-size: 18px">健康评估</n-h6>
            </template>
              <div ref="data4" style="height: 300px; width: 100%;"></div>

            </n-card>
          </n-scrollbar>
        </div>
        <div style="width: 50%;margin-left: 10px">
          <n-card embedded size="small" content-style="padding: 10px;" :bordered="false"
                  :segmented="{content: true,footer: 'soft',}">
            <template #header>
              <n-h6 prefix="bar" style="margin: 0;font-size: 18px">检测记录</n-h6>
            </template>
            <div class="search">
              <NInput size="large" @change="search_project" v-model:value="data.keyword" :loading="data.loading"
                      clearable
                      type="text" placeholder="请输入检测项目名称检索"/>
            </div>
            <n-scrollbar v-if="data.projects.length>0" style="max-height: calc(100vh - 280px);padding:0 20px 20px 0px">
              <n-collapse class="cards" accordion :default-expanded-names="[data.projects[0].id]">
                <n-collapse-item :name="item.id" v-for="item in data.projects" class="card" v-show="item.show===1">
                  <template #header>
                    <div style="display: flex; align-items: center;justify-content: flex-start">
                      <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                        <div style="display: flex">
                          <n-button type="info" dashed size="large">检测单号:{{ item.id }}</n-button>
                          <div style="height:40px;line-height:20px;margin-left: 10px">
                      <span style="margin-right: 5px">
                        {{ item.projects }}
                      </span>
                            <br>
                            <span style="font-size: 12px;color:#747586">{{ item.day }}</span>
                          </div>
                        </div>
                      </n-h6>
                    </div>
                  </template>
                  <template #header-extra>
                    <n-button type="primary" dashed>已出报告</n-button>
                  </template>

                  <div class="project_list">

                    <n-card size="small" :bordered="false" hoverable content-style="padding: 0px;"
                            :segmented="{content: true,footer: 'soft',}">
                      <template #header>
                        <n-h6 prefix="bar" style="margin: 0;font-size: 14px">报告明细</n-h6>
                      </template>
                      <template #footer>
                        <n-scrollbar x-scrollable>
                          <NImage v-for="item2 in item.images"
                                  style="height: 100px;margin-right: 10px;border-radius: 5px"
                                  :src="item2"></NImage>
                        </n-scrollbar>
                      </template>
                    </n-card>


                  </div>

                </n-collapse-item>
              </n-collapse>
            </n-scrollbar>
            <n-empty v-else description="暂无数据" style="margin: 50px"></n-empty>
          </n-card>

        </div>
      </div>

    </n-spin>

    <n-float-button :right="10" :bottom="10" shape="square" @click="add_test" type="primary">
      <component :is="renderIcon('material-symbols-light:add', { size: 25,color:'#fff' })"/>
    </n-float-button>

  </div>


  <n-drawer v-model:show="data.show_form" width="760px">
    <n-drawer-content title="报告添加" closable>
      <NForm
          ref="modalFormRef"
          label-placement="left"
          label-align="left"
          :label-width="100"
          :model="data.giveForm"
      >

        <NFormItem label="报告时间" path="add_time">
          <n-date-picker
              v-model:formatted-value="data.giveForm.add_time"
              type="datetime"
              clearable
              placeholder="请输入报告时间"
              style="width: 100%"
          />
        </NFormItem>

        <NFormItem label="护士项目" path="category_id">
          <n-select
              v-model:value="data.giveForm.category_id"
              :options="data.config.test_category"
              placeholder="选择护士项目"
              label-field="name"
              value-field="id"
              multiple
          />
        </NFormItem>

        <NFormItem label="备注" path="remark">
          <NInput type="textarea" v-model:value="data.giveForm.remark" placeholder="请输入备注" style="width: 593px"/>
        </NFormItem>

        <NFormItem label="报告单" path="images" style="width: 100%">
          <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                   @finish="handleFinish" v-model:file-list="data.giveForm.images">
          </NUpload>
        </NFormItem>


      </NForm>
      <template #footer>
        <n-button type="primary" @click="create_give">
          <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5"/>
          保存
        </n-button>
      </template>

    </n-drawer-content>


  </n-drawer>


</template>


<style>
.container {
  padding: 10px;
  //transform: translate(0);
  position: relative;
  height: 100%;

  .search {
    margin-bottom: 10px;
  }
}

.cards {
  margin: 0px;
}

.project_list {
  background: #f3f3f3;
  padding: 20px;
  border-radius: 5px;

}

.add_test {
  position: absolute;
  bottom: 0;
  background: #eee;
  width: 100%;
  padding: 10px;
  border-top-left-radius: 5px;
}

</style>